08. Aligning & Justifying in Action

Aligning Items & Justifying Content with Flexbox Example Prep

Aligning & Justifying in Action

Aligning, justifying, and distributing is what flexbox is all about. Up next, we will focus in on two of the most powerful properties that flex introduces to achieve such easy and elegant layouts.

ND001 C01 L03 08 Aligning Items Justifying Content With Flexbox Example

Aligning Items & Justifying Content with Flexbox Example Summary

By setting different values for the properties align-items and justify-content you can easily create elegant distribution of elements across the available space.

Aligning Items & Justifying Content with Flexbox Quiz

Which of the following is true?
SOLUTION: The align-items property will align the items on the cross axis.

Workspace

This section contains either a workspace (it can be a Jupyter Notebook workspace or an online code editor work space, etc.) and it cannot be automatically downloaded to be generated here. Please access the classroom with your account and manually download the workspace to your local machine. Note that for some courses, Udacity upload the workspace files onto https://github.com/udacity, so you may be able to download them there.

Workspace Information:

  • Default file path:
  • Workspace type: html-live
  • Opened files (when workspace is loaded): n/a

Aligning Items & Justifying Content with Flexbox Further Research

Further Research

For further research on the topics covered in this section, see this MDN article Alignment, justification and distribution of free space between items.

Reading the documentation will make you smarter and enjoy coding more!

Next Concept